<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>OpenBabel Demo</title>

	<script src="../../libs/raphael-min.2.0.1.js"></script>
	
	<script src="../../libs/kekule/openbabel.js"></script>
	<script src="../../libs/kekule/kekule.js?modules=chemWidget,openbabel"></script>
	<!--
	<script src="../../../../src/kekule.js?modules=chemWidget,algorithm&min=false"></script>
	-->
	<link rel="stylesheet" type="text/css" href="../../libs/kekule/themes/default/kekule.css" />

	<style>
		html, body
		{
			/*
			margin: 0;
			padding: 0;
			overflow: hidden;
			*/
		}
		#chemViewer
		{
			border: 1px solid #ccc;
		}
	</style>

	<script name="pyrrole" id="pyrrole" type="chemical/x-mdl-molfile">
Untitled Document-2
  Kekule  11201418212D

  5  5  0  0  0  0  0  0  0  0999 V2000
    0.4125    0.6348    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
   -0.4125    0.6348    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
   -0.6674   -0.1498    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    0.0000   -0.6348    0.0000 N   0  0  0  0  0  0  0  0  0  0  0  0
    0.6674   -0.1498    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
  1  2  1  0
  2  3  2  0
  3  4  1  0
  4  5  1  0
  5  1  2  0
M  END
	</script>

	<script>
		var chemViewer;
		function init()
		{
			chemViewer = Kekule.Widget.getWidgetById('chemViewer');
			// adjust size
			adjustSize();
			window.onresize = adjustSize;
		}
		function adjustSize()
		{
			var dim = Kekule.HtmlElementUtils.getViewportDimension(document);
			chemViewer.setWidth(dim.width - 20 + 'px').setHeight(dim.height - 50 + 'px');
		}

		Kekule.X.domReady(init);
	</script>
</head>
<body>

<div id="chemViewer" style="width:100%;height:650px"
		 data-widget="Kekule.ChemWidget.Viewer2D" data-enable-toolbar="true" data-auto-size="false" data-padding="20"
		 data-toolbar-evoke-modes="[0]"
		 data-chem-obj="url(#pyrrole)"></div>
		 
<div>
	This page uses a ported JavaScript version of OpenBabel so that much more file format can be supported. Check it by click on the "Load Data" or "Save to File" button in viewer above.
</div>

</body>
</html>